<template>
  <div class="rotor">
      <div style="width:100%; height:4rem"></div>
    <div class="turntable">
      <!-- 点击时候转动转盘 指针不转 -->
      <img
        class="turntable-center"
        :style="{transform:rotateAngle,transition:rotateTransition == ''?'transform 4s ease-in-out':rotateTransition }"
        src="http://assets.rurushishi.com/activies/bgyAct/cRotor2.png"
      >
      <img
        class="turntable-top"
        @click="pointer()"
        src="http://assets.rurushishi.com/activies/bgyAct/pointer.png"
      >
    </div>


    <div class="return" @click="ret">
            <img src="http://assets.rurushishi.com/activies/bgyAct/return.png" alt="">
    </div>

    <div class="writeinfo" v-show="prizeInfo.flag">
          <div class="writeinfo_warp">
            <div class="writeinfo_prizeinfo">
              恭喜您获得“{{prize}}”
            </div>
            <div class="writeinfo_tips">填写以下信息领取奖励！</div>
            <div class="writeinfo_name" v-show="prizeInfo.prizeType==2">
              <input v-model="userWriteForm.name" type="text" placeholder="请输入您的姓名" @blur="blurInput" @focus="focusClick">
            </div>
            <div class="writeinfo_mobile">
              <input v-model="userWriteForm.mobile" type="text" placeholder="请输入您的手机号" @blur="blurInput" @focus="focusClick">
            </div>
            <div class="writeinfo_code">
              <div class="left">
                <input v-model="userWriteForm.code" type="text" placeholder="请输入验证码" @blur="blurInput" @focus="focusClick">
              </div>
              <div class="right">
                <div class="writeinfo_code_btn saclebtn" @click="clickCode" v-show="!showVcode">{{VerShowTxt}}</div>
                <div class="writeinfo_code_btn saclebtn" v-show="showVcode">{{counts}}s</div>
              </div>
            </div>
            <div class="writeinfo_btns">
              <div class="writeinfo_btns_ok saclebtn" @click="clickSubmit">确定</div>
              <div class="close" @click="close">关闭</div>
            </div>
          </div>
        </div>

  </div>
</template>
<script>
// import {MessageBox} from "mint-ui";
import request from "@/utils/request";
import axios from "axios";
import wx from "weixin-js-sdk";
import * as config from "./config";
import Cookies from "js-cookie";
import Share from "@/components/common/Share";
import Bottom from "@/components/common/Bottom";
import Qs from "qs";
import {MessageBox} from "mint-ui";
import utils from "@/utils/utils";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      isFocus:false,
      luckflag: true,
       openid:Cookies.get("openid"),
      registeroid:  this.$route.query.registeroid
      ? this.$route.query.registeroid
      : '', //销售中介的openid
      rotateAngle: 0, //将要旋转的角度
      startRotatingDegree: 3600, //初始旋转角度
      rotateTransition: "", //控制过渡效果
      click_flag: true, //是否可以旋转抽奖
      prize: "话费红包",
      isShowMask: "false",
      prizeId: 0,


      prizeInfo:{
        prizeType: 1,
        flag: false
      },
      userWriteForm:{
        name: '',
        mobile: '',
        code: ''
      },
      timer: null,
      VerShowTxt: '获取验证码',
      showVcode: false,
      counts: '',
    };
  },
  methods: {
    focusClick(e) {
                this.isFocus = true;
                if (utils.browser.versions.ios) {
                    setTimeout(function () {
                        e.target.scrollIntoView(true);
                    }, 100);
                }
            },
            blurInput(e) {
                this.isFocus = false;
                this.$nextTick(() => {
                    if (utils.browser.versions.ios && !this.isFocus) {
                        setTimeout(function () {
                            e.target.scrollIntoView(false);
                        }, 300);
                    }
                });
            },

     //返回首页
        ret(){
            // this.$router.push({path:"./index",query:{channel:this.channel,reOpenid:this.reOpenid}});
             window.location.href = location.protocol + '//' + location.host + '/act/bgyact/index?channel=' + this.channel + '&reOpenid=' + this.openid+'&registeroid='+this.registeroid;
        },

    // 点击指针
    pointer() {
      const me = this;
      //   // 如果没有登录,则前往登录页面
      //   if(me.$store.state.loginUser!='true'){
      //       this.$router.push({path:'/login.html',query:{fancy:'fancy'}})
      //       return
      //   }
      // 抽奖函数
      this.getlotteryPrizeFun();
    },
    // 转动
    rotate(prize) {
      //目前是只转动转盘
      //  if (!this.click_flag) return;
      var type = 0; // 默认为 0  转盘转动
      var randCircle = 4; // 附加多转几圈，2-3
      var duringTime = 3.5; // 默认为 5s
      var rotateAngle = "";
      switch (prize) {
        case "多功能数据线":
          rotateAngle = randCircle * 360 + 30;
          break;
        case "精美擦车卡":
          rotateAngle = randCircle * 360 + 270;
          break;
        case "话费红包":
          rotateAngle = randCircle * 360 + 330;
          break;
        case "广告扇":
          rotateAngle = randCircle * 360 + 210;
          break;
        case "车载手机支架":
          rotateAngle = randCircle * 360 + 90;
          break;
        case "妇联4电影票2张":
          rotateAngle = randCircle * 360 + 150;
          break;
      }
      this.click_flag = false; // 旋转结束前，不允许再次触发
      if (type == 0) {
        // 转动盘子
        var rotateAngle =
          this.startRotatingDegree +
          rotateAngle -
          (this.startRotatingDegree % 360); //将要旋转的角度
        this.startRotatingDegree = rotateAngle; //改变初始旋转的角度
        this.rotateAngle = "rotate(" + rotateAngle + "deg)"; //真正控制转动角度
        // 旋转结束后允许再次触发
        setTimeout(() => {
          this.click_flag = true;
          this.gameOver(prize);
        }, duringTime * 1000 + 200);
      }
    },
    // 游戏结束
    gameOver() {
      // 游戏结束,重置旋转初始位置
      this.rotateAngle = "rotate(" + 0 + "deg)"; //真正控制转动角度的,为0,回到初始位置
      this.rotateTransition = "transform 0.05s ease-in-out"; //控制转动过渡效果的
      setTimeout(() => {
        this.rotateTransition = "";
      }, 100);
      // 中奖弹窗提示
      this.prizeInfo.flag = true;
    //   this.winAward = true;
      // 更新抽奖次数
      this.getActcivityFancy();
    },
    // 请求活动页面数据
    getActcivityFancy() {
      const me = this;
      me.num = 100;
    },
    //请求点击抽奖数据,中奖操作
    getlotteryPrizeFun() {
      // const _self = this;
       let _self = this;
      let query = {
        activityId: config.ACT_CODE,
        channel: _self.channel,
        openId: Cookies.get("openid"),
        projectId: 49,
        type: 2,
        // lat: 1,
        // lng: 1,
      };
      axios
        .post(
          `${_self.global.API_FORUM_URL}/api/activity/luckyDraw?${Qs.stringify(
            query
          )}`,
          {}
        )
        .then(response => {
          console.info(response)
          if(response.code==0){
            _self.prizeId = response.prizeId
              _self.prize = response.prize;
              if(response.key==6){
                _self.prize = '至多200元随机话费'
              }

            _self.rotate(response.prize);
            //   _self.$nextTick(() => {
            //     _self.prize = response.prize;
            //  });
          }
        });

    //   console.log(_self.prize)
      // _self.rotate(_self.prize);
      // if(_self.prize == '话费红包'){
      //   _self.prizeText =''
      // }
    },
    
    //点击确认
    clickSubmit(){
        let _self = this;
        if (!_self.userWriteForm.mobile) {
                    return MessageBox.alert("请输入手机号", "提示");
                } else {
                    if (!utils.isMobile(_self.userWriteForm.mobile)) {
                        return MessageBox.alert("请填写正确的手机号", "提示");
                    }
                }
                 if (!_self.userWriteForm.code) {
                    return MessageBox.alert("请输入验证码", "提示");
                }else{
                    _self.userWriteForm.code.substring(0,4) //截取前6位字符
                }

                if(_self.registeroid){
                  _self.andBindRegister(_self.userWriteForm.mobile);
                }
                

           let query = {
                          prizeId:_self.prizeId,
                          // openId: _self.openid,
                          openId: Cookies.get("openid"),
                          activityId: config.ACT_CODE,
                          mobile: _self.userWriteForm.mobile,
                          code: _self.userWriteForm.code,
                          name: _self.userWriteForm.name
                        };
                        axios
                            .post(
                              `${_self.global.API_FORUM_URL}/api/activity/luckyDrawPrize?${Qs.stringify(
                                query
                              )}`,
                              {}
                            )
                            .then(response => {
                              if(response.code==0){
                                //  _self.$router.push({path:"./main",query:{channel:_self.channel}});
                                  window.location.href = location.protocol + '//' + location.host + '/act/bgyact/main?channel=' + _self.channel + '&reOpenid=' + _self.openid+'&registeroid='+_self.registeroid;
                              }
                            });
    },
    //获取手机验证码
            getActPhoneVCode(){
                const _self = this;
                if(!_self.userWriteForm.mobile){
                        return MessageBox.alert("请输入手机号", "提示");
                    }else{
                      let query = {
                          activityId: config.ACT_CODE,
                          mobile: _self.userWriteForm.mobile
                        };
                        axios
                            .post(
                              `${_self.global.API_FORUM_URL}/api/activity/getSmsCode?${Qs.stringify(
                                query
                              )}`,
                              {}
                            )
                            .then(response => {
                              console.info(response)
                              if(response.code==0){
                                
                              }
                            });
                    };
            },

            clickCode(){
                const _self = this;
                const TIME_COUNT = 60;
                _self.getActPhoneVCode();
                if(!_self.timer&&_self.userWriteForm.mobile){
                    _self.counts = TIME_COUNT;
                    _self.showVcode = true;
                    _self.timer = setInterval(()=>{
                        if(_self.counts>0&&_self.counts<=TIME_COUNT){
                            _self.counts--;
                        }else{
                            _self.showVcode = false;
                            _self.VerShowTxt = '重新获取';
                            clearInterval(_self.timer);
                            _self.timer = null;
                        }
                    },1000)
                }
              
            },
            close() {
              let _self = this;
               _self.prizeInfo.flag=false;
               window.location.href = location.protocol + '//' + location.host + '/act/bgyact/main?channel=' + _self.channel +'&reOpenid=' + _self.openid+'&registeroid='+_self.registeroid;
                // _self.$router.push({path:"./main",query:{channel:_self.channel}});
            },


    // 销售中介提交手机号要调用的接口
    andBindRegister(mobile) {
                let _self = this;
                request
                    .get(_self.global.API_URL, {
                        action: "/hb/HbUserAction/addUserInfoWithPhoneAndBindRegister",
                        requestParam: {
                            registeroid: _self.registeroid,
                            obj:{
                              // name: '',
                              openid: Cookies.get("openid"),
                              mobile:mobile,
                            }
                        }
                    })
                    .then(response => {

                    });
    },        

    ...mapMutations({
      setInfo: "SET_INFO",
      setChannel: "SET_CHANNEL"
    })

    
  },
  created() {
    this.reOpenid = this.$route.query.reOpenid
      ? this.$route.query.reOpenid
      : '';
    this.setChannel(this.$route.query.channel ? this.$route.query.channel : 0);
    let _self =this;
            //  if(!_self.info.nickname){
                request
                    .get(_self.global.API_URL, {
                        action: "getUserinfo",
                        requestParam: {
                          
                        }
                    })
                    .then(response => {
                        _self.setInfo(response.obj.user);
                        // console.log(response.obj.salerOrAgent);
                        if(response.obj.salerOrAgent){
                          _self.registeroid=response.obj.user.openid
                          //  _self.registeroid = Cookies.get("openid")
                        }
                        // console.log(_self.info);
                        if (_self.info && _self.info.nickname && _self.info.nickname != '') {
                            _self.global.SHARE_TITLE = _self.info.nickname + "邀请你参加碧桂园27周年庆专属优惠 最大折合9折";
                        }
                        _self.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/bgyact/main?channel=' + _self.channel + '&reOpenid=' + _self.openid+'&registeroid='+_self.registeroid;
                    })
            
  },
  computed: {
    ...mapState(["info", "channel"])
  },

  mounted(){
      // let _self = this;
      // let query = {
      //   activityId: config.ACT_CODE,
      //   channel: _self.channel,
      //   openId: Cookies.get("openid"),
      //   projectId: 49,
      //   type: 2,
      //   // lat: 1,
      //   // lng: 1,
      // };
      // axios
      //   .post(
      //     `${_self.global.API_FORUM_URL}/api/activity/luckyDraw?${Qs.stringify(
      //       query
      //     )}`,
      //     {}
      //   )
      //   .then(response => {
      //     console.info(response)
      //     if(response.code==0){
      //       //   _self.prize = response.prize;
      //         _self.$nextTick(() => {
      //           _self.prize = response.prize;
      //        });
      //     }
      //   });

        let _self = this;
           _self.global.SHARE_CALLBACK_OK = function (type) {
            //  let _self = this;
             let query = {
                activityId: config.ACT_CODE,
                // channel: 1,
                openId: Cookies.get("openid")
              };
                axios
                    .post(
                    `${_self.global.API_FORUM_URL}/api/activity/share?${Qs.stringify(
                      query
                    )}`,
                    {
                      
                    })
                    .then(response => {
                        if(response.code==0){
                          _self.isshare = false;
                        }
                         
                    });

            };
            config.initShare();
  }
  
};
</script>
<style lang="stylus" scoped>
.rotor{
    position absolute
    top 0
    left 0 
    bottom 0
    right 0
    background url(http://assets.rurushishi.com/activies/bgyAct/draw1.jpg) no-repeat
    background-size 100% 100%
}
.turntable {
  width: 6.03rem;
  height: 6.09rem;
  position: relative;
  margin: 0 auto;
  background url(http://assets.rurushishi.com/activies/bgyAct/rotor.png) no-repeat
  background-size 100% 100%
}

.turntable .turntable-center {
  width 4.75rem
  height 4.72rem
  position: absolute;
  top: .685rem;
  left: -2.375rem;
  margin-left: 50%;
  z-index 8
}

.turntable .turntable-top {
  width 1.51rem
  height 1.86rem
  position: absolute;
  top: 2.13rem;
  left: -.755rem;
  margin-left: 50%;
  z-index 10
}
.return{
    position absolute
    bottom: 1.2rem
    right 0
    width: .81rem
}
.return>img{
    width: 100%
    height: 100%
}

.writeinfo {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index 20
}


.writeinfo_warp {
  position: relative;
  width: 80%;
  background-color: blue;
  background: url('http://assets.rurushishi.com/activies/bgyAct/msg.png') repeat center center;
  background-size: 100% 100%;
  padding: 1.2rem 0;
}

.writeinfo_warp >div {
  margin-top: 0.3rem;
}

// .writeinfo_bg {
// position: absolute;
// }

// .writeinfo_bg img {
// width: 100%;
// }
.writeinfo_prizeinfo {
  margin-top: 0rem !important;
  width: 80%;
  margin 0 auto
  text-align: center;
  font-size: 0.28rem;
  color: #ffffff;
}

.writeinfo_tips {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
  color: #ffffff;
}

.writeinfo_name {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
}

.writeinfo_name input {
  border-radius: 0.3rem;
  width: 80%;
  height: 0.6rem;
  text-indent: 0.3rem;
  border-color: #eee1a9;
}

.writeinfo_mobile {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
}

.writeinfo_mobile input {
  border-radius: 0.3rem;
  width: 80%;
  height: 0.6rem;
  text-indent: 0.3rem;
  border-color: #eee1a9;
}

.writeinfo_code {
  width: 80%;
  margin: 0.2rem auto 0 auto;
  display: flex;
}

.writeinfo_code input {
  border-radius: 0.3rem;
  width: 100%;
  height: 0.6rem;
  text-indent: 0.3rem;
  border-color: #eee1a9;
}

.writeinfo_code .writeinfo_code_btn {
  border-radius: 0.3rem;
  min-width: 1rem;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  margin-left: 10%;
  background-color: #ffb53b;
  padding: 0 0.1rem;
}

.writeinfo_btns {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}

.writeinfo_btns .writeinfo_btns_ok {
  width: 30%;
  margin-right 10%;
  height: 0.6rem;
  line-height: 0.6rem;
  background-color: #ffb53b;
  border-radius: 0.3rem;
}
.writeinfo_btns .close{
  width: 30%;
  height: 0.6rem;
  line-height: 0.6rem;
  background-color: #ffb53b;
  border-radius: 0.3rem;
}
</style>


